<template>
  <div class="main-content-container">
    <!-- 手术排台 -->
    <div ref="search">
      <el-row type="flex">
        <!-- <el-col :span="12">
        <el-form ref="searchFormRef" label-width="80px" :inline="true">
          <el-form-item>
            <el-input v-model="custQuery" class="inputCss" placeholder="姓名、手机号、会员号" clearable @change="handleChange" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleChange">搜索顾客</el-button>
            <el-button @click="eliminate">清除</el-button>
          </el-form-item>
        </el-form>
      </el-col> -->
        <el-col :span="14" class="searchs-y">
          <el-form ref="searchs" label-width="80px" :inline="true">
            <el-form-item>
              <el-input v-model="custQuery" placeholder="姓名、手机号、会员号" clearable @change="handleChange">
                <el-button slot="append" icon="el-icon-search" @click="handleChange" />
              </el-input>
              <el-form-item v-if="false" class="spn buttons clear-button">
                <el-button type="primary" @click="eliminate">清除</el-button>
              </el-form-item>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="2" class="spn buttons" :offset="14">
          <el-button type="primary" @click="handleOperation('add')">+ 增加手术</el-button>
        </el-col>
      </el-row>
      <el-form>
        <el-row type="flex" class="float-l">
          <Search :data="selections" :attribute="'appointmentBeginTime'" @change="handleTypeChange" @dateChange="handleDateChange" />
          <el-form-item>
            <el-select v-model="search.deptId" clearable class="el-select-y" placeholder="请选择治疗科室" @change="getList">
              <el-option
                v-for="item in department"
                :key="item.id"
                :label="item.deptName"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
        </el-row>
      </el-form>
      <el-row class="mounteds">
        <!-- <Search :data="tabsName" :values="status" @change="handleTypeChange" /> -->
        <Tabs v-model="status" :data="tabsName" @change="searchChange" />
      </el-row>
    </div>
    <div class="box-show" :style="'height:'+ (innerHeight + 86) + 'px'">
      <el-table
        :data="tableData"
        style="width: 100%"
        border
        :row-class-name="tableColor"
        :height="innerHeight"
      >
        <el-table-column
          prop="customerName"
          label="顾客"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          prop="customerSex"
          label="性别"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          prop="productNo"
          label="项目单号"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          prop="projectName"
          label="项目"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          prop="deptName"
          label="治疗科室"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          prop="arrangeTime"
          label="排台时间"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          prop="attendingDoctor"
          label="主治医生"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          prop="consultantName"
          label="咨询师"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          prop="status"
          label="状态"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          prop="appointmentBeginTime"
          label="开始时间"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          prop="appointmentEndTime"
          label="结束时间"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          prop="name"
          label="操作"
          min-width="120"
        >
          <template slot-scope="{ row }">
            <el-button v-if="row.status==='已到达'" type="text" @click="startOperation(row.id)">开始</el-button>
            <el-button v-if="row.status==='预约中'||row.status==='已到达'" type="text" @click="handleOperation('eadit',row)">修改</el-button>
            <el-button v-if="row.status==='预约中'||row.status==='已到达'" type="text" @click="cancelOperation(row.id)">取消预约</el-button>
            <el-button v-if="row.status==='进行中'" type="text" @click="endOperation(row.id)">结束</el-button>
            <el-button v-if="row.status==='已取消'" type="text" @click="handleOperation('again',row)">重新预约</el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination :page-num="queryParams.page" :page-size="queryParams.pageSize" :on-change="handlePaginationChange" :total="total" />
    </div>
    <Operation ref="operation" @success="getList()" />
  </div>
</template>

<script>
import Search from "@/components/Search";
import { selections } from "@/config";
import Tabs from "@/components/SearchSelection";
import Operation from './addOperation.vue';
import { tableColor, labelHeigh } from '@/utils/common.js';
export default {
  components: {
    Search,
    Tabs,
    Operation,
  },
  data() {
    return {
      tableColor,
      innerHeight: null,
      queryParams: {
        page: 1,
        pageSize: this.$store.state.commonsettings.maxPageSize,
      },
      custQuery: "",
      selections,
      tableData: [],
      total: 0,
      search: {
        status: "预约中",
        timeType: "today",
        appointmentBeginTime:
          new Date().getFullYear() +
          "-" +
          (new Date().getMonth() + 1) +
          "-" +
          new Date().getDate() +
          " 00:00:00" +
          "_" +
          new Date().getFullYear() +
          "-" +
          (new Date().getMonth() + 1) +
          "-" +
          new Date().getDate() +
          " 23:59:59",
      },
      status: "预约中",
      tabsName: [
        { id: "全部", name: "全部" },
        { id: "预约中", name: "预约中" },
        { id: "已到达", name: "已到达" },
        { id: "进行中", name: "进行中" },
        { id: "已结束", name: "已结束" },
        { id: "已取消", name: "已取消" },
      ],
      options: [{
        value: '选项1',
        label: '黄金糕',
      }, {
        value: '选项2',
        label: '黄金糕1',
      }],
      value: '',
      department: [],
    };
  },
  mounted() {
    this.innerHeight = labelHeigh(this.$refs.search);
    this.getList();
    this.$nextTick(function() {
      this.getAllDepartment();
    });
  },
  methods: {
    async getAllDepartment() {
      const res = await this.$api['data/hospitalStaff/getAllDepartment']({ query: { cureDept: 'true' }});
      if (res.code !== 200) return;
      this.department = res.data;
    },
    async cancelOperation(id) { // 取消
      const confirmResult = await this.$confirm('请确认是否取消?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).catch((err) => err);
      if (confirmResult === 'confirm') {
        const res = await this.$api["department/operation/cancelOperation"]({ id });
        if (res.code !== 200) return this.$message.info('取消失败');
        this.getList();
        return this.$message.success('已取消成功');
      }
    },
    async endOperation(id) { // 结束
      const confirmResult = await this.$confirm('请确认是否结束?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).catch((err) => err);
      if (confirmResult !== 'confirm') {
        return this.$message.info('已取消结束');
      } else {
        const res = await this.$api["department/operation/endOperation"]({ id });
        if (res.code !== 200) return this.$message.info('取消失败');
        this.getList();
        return this.$message.insuccessfo('已结束');
      }
    },
    async startOperation(id) { // 开始
      const confirmResult = await this.$confirm('请确认是否开始手术?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).catch((err) => err);
      if (confirmResult !== 'confirm') {
        return this.$message.info('已取消');
      } else {
        const res = await this.$api["department/operation/beginOperation"]({ id });
        if (res.code !== 200) return this.$message.info('取消失败');
        this.getList();
        return this.$message.success('已开始手术');
      }
    },
    async reschedule() { // 重新预约
      const confirmResult = await this.$confirm('请确认是否重新预约?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).catch((err) => err);
      if (confirmResult !== 'confirm') {
        return this.$message.info('已取消');
      } else {
        this.getList();
        return this.$message.success('重新预约成功');
      }
    },
    handleOperation(val, row) { // 增加手术-修改-重新预约按钮
      this.$refs.operation.handleOperation(val, row);
    },
    handleChange() {
      this.queryParams.page = 1;
      this.getList();
    },
    handleTypeChange(val) {
      Object.assign(this.search, val);
      this.getList();
    },
    handleDateChange(val) {
      Object.assign(this.search, val);
      this.getList();
    },
    searchChange(e) {
      // Tabs切换的方法函数
      Object.assign(this.search, { status: e === "全部" ? "" : e });
      this.getList();
    },
    eliminate() {
      this.searchForm = {};
      this.timeVlaue = "";
      this.custQuery = "";
      this.queryParams.page = 1;
      this.getList();
    },
    handlePaginationChange(pagination) {
      // 分页
      this.queryParams = {
        page: pagination.pageNum,
        pageSize: pagination.pageSize,
      };
      this.getList();
    },
    async getList() {
      // Object.assign(this.queryParams, this.search);
      if (!this.search.deptId) this.search.deptId = undefined;
      const res = await this.$api["department/operation/operationList"]({ ...this.queryParams, query: this.search, custQuery: this.custQuery });
      if (res.code !== 200) return this.$message.info('请求排台数据失败');
      this.tableData = res.data.result;
      this.total = res.data.total;
    },
  },
};
</script>
<style lang="scss" scoped>
  .mounteds {
    margin: 0 0 10px 0;
  }
  .top{
    margin-top: 10px;
  }
</style>
